<template>
	<view class="text-df">
		<view class="padding-lg bg-white">
			<view class="text-lg theme-color text-bold">任务详情</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">发布者：</view>
				<view> {{compose.createBy}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">地址：</view>
				<view> {{compose.location}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">链接：</view>
				<view @click="getDetail(compose.fullAddress)"> {{compose.fullAddress}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">意见内容：</view>
				<text style="width: 65%;height:100px;overflow-y: scroll;white-space: normal;" @click="getDetail(compose.content)">{{compose.content}}</text>
			</view>
			<view class="margin-tb-sm">图片：</view>
			<image :src="compose.taskImg" style="width: 150rpx; height: 150rpx;" mode="aspectFill"
				class="margin-right-sm margin-top-sm">
			</image>
			<view class="margin-top-sm flex-row">
				<view style="width: 280rpx;">已完成人数/总人数：</view>
				<view style="">{{compose.processed}} / {{compose.totalCount}}</view>
			</view>
			<view class="margin-top-sm flex-row">
				<view style="width: 150rpx;">发表时间：</view>
				<view> {{compose.createTime}}</view>
			</view>
		</view>
		<view class="padding-lg bg-white margin-top-sm" v-if="admin==0">
			<view class="text-lg theme-color text-bold margin-bottom-sm">处理任务</view>

			<u--form labelPosition="left" :model="form" :rules="rules" ref="form" :borderBottom="false">
				<u-form-item label="问题描述" prop="content" :borderBottom="false" ref="item1" labelWidth="80">
					<u--textarea v-model="form.content" placeholder="问题描述..." count></u--textarea>
				</u-form-item>
				<u-form-item label="上传图片" prop="imageValue" :borderBottom="false" ref="item1" labelWidth="80">
					<uni-file-picker @select="handleSelect" v-model="form.imageValue" @delete="deletePic"
						:limit="1"></uni-file-picker>
				</u-form-item>
			</u--form>
		</view>

		<view class="padding-lg bg-white margin-top-sm" v-if="admin==1">
			<view class="text-lg theme-color text-bold margin-bottom-sm">处理列表</view>

			<view v-for="(item,index) in compose.taskAllocations" :key="index" class="flex-row-bt margin-top-sm"
				style="height: 60rpx;">
				<view>{{item.processedBy}}</view>
				<view v-if="item.status=='0'" class="text-red">待处理</view>
				<view v-if="item.status=='1'" class="text-low">已完成</view>
			</view>
		</view>

		<view style="height: 100px;"></view>
		<view class="flex-row-bt fix-bottom" v-if="admin==0">
			<button hover-class="none" class="login-btn theme-color" style="border: 1px solid #247eff;"
				@click="refresh">重置</button>
			<button hover-class="none" class="login-btn theme-bg-color text-white" style=""
				@click="submit()">上传结果</button>
		</view>
	</view>
</template>

<script>
	import config from '../../../config'
	import {
		getTaskInfo,
		updateTask
	} from '../../../api/task'

	export default {
		data() {
			return {
				compose: {

				},

				// 处理结果表单
				form: {
					content: '',
					telPhone: '',
					processedImg: '',
					processedBy: '',
					taskId: '',
					imageValue: []
				},
				rules: {
					content: {
						type: 'string',
						required: true,
						message: '请输入问题描述',
						trigger: ['blur', 'change']
					},
					imageValue: {
						type: 'array',
						min: 1,
						required: true,
						message: '请上传图片',
						trigger: ['change']
					}
				},
				admin: 0
			}
		},
		onLoad(options) {
			this.form.taskId = options.id
			let code = uni.getStorageSync('code')
			if (code == 213261619) {
				this.admin = 0
			} else if (code == 927360369) {
				this.admin = 1
			}
			//详情
			this.getinfo()
			this.form.telPhone = uni.getStorageSync('phone')
			this.form.processedBy = uni.getStorageSync('userInfo').name
		},
		methods: {
			// 复制粘贴
			getDetail(info) {
				uni.showModal({
				    content: info,//模板中提示的内容
				    confirmText:'复制内容',
				    success:(res) => {//点击复制内容的后调函数
						if(res.confirm) {
							let result
							// #ifndef H5
							//uni.setClipboardData方法就是讲内容复制到粘贴板
							uni.setClipboardData({
								data: info,//要被复制的内容
								success:() => {//复制成功的回调函数
									uni.showToast({//提示
										title:'复制成功' 
									})
								}
							});
							// #endif
							
							 // #ifdef H5 
								let textarea = document.createElement("textarea")
								textarea.value = info
								textarea.readOnly = "readOnly"
								document.body.appendChild(textarea)
								textarea.select() // 选中文本内容
								textarea.setSelectionRange(0, info.length) 
								uni.showToast({//提示
									title:'复制成功' 
								})
								result = document.execCommand("copy") 
								textarea.remove()    
							// #endif
						} else {
							console.log('取消')
						}
				    }
				});
			},
			//详情
			getinfo() {
				getTaskInfo(this.form.taskId).then(res => {
					this.compose = res.data
					console.log(JSON.stringify(res.data))
					this.form.select = res.data.advise.firstAddress + "/" + res.data.advise.secondAddress
				})
			},

			handleSelect(res) {
				const baseUrl = config.imagePrefix
				console.log(baseUrl)
				uni.uploadFile({
					url: baseUrl + '/upload/localhost', //post请求的地址
					filePath: res.tempFiles[0].url,
					name: 'file',
					success: (uploadFileRes) => {
						//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
						var obj = JSON.parse(uploadFileRes.data);
						this.form.processedImg = obj.data
						this.form.imageValue = [{
							name: "file",
							extname: "png",
							url: obj.data,
						}]

					}
				})
			},

			// 删除图片
			deletePic(event) {
				this.form.processedImg = ''
				this.form.imageValue = []
			},

			//重新分配
			refresh() {
				this.form.content = ''
				this.form.processedImg = ''
				this.imageValue = []
			},
			//上传结果
			submit() {
				let that = this
				this.$refs.form.validate().then(async res => {
					console.log("1111")
					updateTask(this.form.processedBy, this.form.telPhone, this.form.content, this.form.taskId,
						this.form.processedImg).then(
						res => {
							console.log(res)
							if (res.code === 200) {
								uni.showToast({
									title: "上传成功",
									icon: 'success',
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							}
						})
				}).catch(errors => {
					console.log(errors)
					uni.showToast({
						icon: 'error',
						title: "上传失败"
					})
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.form.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}
	.login-btn {
		height: 40px;
		font-size: 14px;
		line-height: 40px;
		width: 90%;
		justify-content: center;
		margin: 0 5%;
	}

	.fix-bottom {
		bottom: 3%;
		position: fixed;
		width: 100%;
	}
</style>